<template>
    <div class="pre-order">
        <h1 class="confirm-title">确认订单</h1>
        <el-table :data="currentProduct" style="width: 100%">
            <el-table-column align="center" label="充值产品">
                <template v-slot="{ row }">
                    <img style="vertical-align: middle" width="40%" :src="row.imageUrl" alt="" />
                    &nbsp;
                    <span style="color: #f4c14f; font-weight: bolder">{{ row.productName }}</span>
                    <br />
                    <span>{{ row.description }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="price" label="单价">
                <template v-slot="{ row }">
                    <span class="price">
                        {{ row.price }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="address" label="数量">
                <!-- 坑 -->
                <template v-slot="{ row }">
                    <el-input-number v-model="quantity" size="mini" :min="1" :max="100000" label="描述文字">
                    </el-input-number>
                </template>

            </el-table-column>
            <el-table-column align="center" prop="address" label="小计">

                <template>
                    <span class="total_fee">{{ total_fee }}</span>
                </template>

            </el-table-column>
        </el-table>
        <div class="total-fee">
            <div class="box-wrap">
                <div class="box-shadow">
                    <span class="realpay--title" data-spm-anchor-id="a210c.1.0.i0.52681deblyKpHg">实付款：</span>
                    <span class="realpay--price-symbol">¥</span>
                    <span class="realpay--price" style="color: rgb(255, 80, 0)">{{ total_fee }}</span>
                    <div class="order-confirmAddr">
                        <div class="confirmAddr-addr-user">
                            <span class="confirmAddr-title">充值详情：</span><span
                                class="confirmAddr-pro">尊贵vip3充值-vip包月服务,心悦vip3,尊贵体验,强行踢人下线,你值得拥有</span>
                        </div>
                        <div class="confirmAddr-addr">
                            <span class="confirmAddr-title">充值账户：</span><span class="confirmAddr-usn">{{
                                userInfo.username
                            }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="btn">
                <el-button @click="commitOrder" type="danger">提交订单</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import * as api from '@/api/pay'
export default {
    created() {
        //获取query参数
        console.log(this.$route)
        let { product_id } = this.$route.query
        this.product_id = product_id;
        api.getProductDetailApi(product_id)
            .then(res => {
                // console.log(res)
                this.currentProduct = res.data.data;
            })
    },
    computed: {
        total_fee() {
            return (this.quantity * this.currentProduct[0]?.price).toFixed(2)
        }
    },
    data() {
        return {
            product_id: "",
            userInfo: {},
            quantity: 1, //数量
            currentProduct: [],
            //total_fee: "0.00", //总价格
        };
    },
    methods: {
        commitOrder() {
            //提交订单方法
            this.$confirm('您是否确认购买' + this.currentProduct[0].productName + ',商品总价格为:' + this.total_fee, '确认订单', {
                confirmButtonText: '确定下单',
                cancelButtonText: '取消',
                type: "info"
            })
                .then(() => {
                    //调用下单接口
                    api.preOrderApi(this.product_id, this.quantity)
                        .then(res => {
                            console.log(res)
                            if (res.data.state) {
                                //下单成功 获取订单id
                                let { order_id } = res.data
                                //跳转到支付页面,携带订单号
                                this.$router.push({ name: "home-payment-pay", query: { order_id } })
                            }
                        })
                })
                .catch(() => {
                    this.$message.error('已取消下单')
                })
        },
    },
};
</script>

<style lang="less" scoped>
.price {
    color: #ff0036;
    font-weight: bolder;
}

.total_fee {
    font-size: 16px;
    color: #ff0036;
}

.el-button {
    width: 180px;
    border-radius: 0;
}

.confirm-title {
    text-align: left;
    margin-bottom: 30px;
}

.pre-order {
    padding: 80px 100px 0 100px;
}

.total-fee {
    margin-top: 50px;
    text-align: right;
}

.box-wrap {
    display: inline-block;
    border: 1px solid #ff0036;

    .box-shadow {
        border: 3px solid #fff0e8;
        min-width: 300px;
        padding: 10px 5px 10px 20px;

        .realpay--title {
            font-weight: 700;
            color: #333;
        }

        .realpay--price-symbol {
            font-size: 26px;
            margin-right: 4px;
            color: #999;
        }

        .realpay--price {
            color: #ff0036;
            font: 700 26px tahoma;
        }

        .order-confirmAddr {
            line-height: 1.6;
            font-weight: bolder;
            margin-top: 10px;
            font-size: 16px;

            // text-align: center;
            // font-family: "PingFang SC";
            .confirmAddr-usn {
                color: #ff0036;
                font-size: 20px;
            }

            .confirmAddr-pro {
                color: goldenrod;
                font-size: 16px;
            }
        }
    }
}
</style>